

<template>
  <div class="my_discovery">
    <!-- 轮播图区域 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" width="100%" height="200px" />
      </van-swipe-item>
    </van-swipe>

    <!-- 宫格导航区域 -->
    <van-grid :border="false" :column-num="4">
      <van-grid-item v-for="item in gridData" :key="item.id">
        <van-image :src="item.imgUrl" height="40px" />
        <div class="grid_text">{{ item.text }}</div>
      </van-grid-item>
    </van-grid>

    <!-- 发现好歌单 -->
    <div class="music_list">
      <div class="text">发现好歌单</div>
      <van-button plain round type="default" size="small">
        <span>查看更多</span>
      </van-button>
    </div>
    <!-- 歌单列表 -->
    <van-row :gutter="[20, 20]">
      <van-col span="12" v-for="item in musicList" :key="item.id" @click="toMusicList(item.id)">
        <img :src="item.musicImg" alt="" width="100%" height="180px">
        <div>{{ item.auth }}</div>
      </van-col>
    </van-row>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 宫格数据
const gridData = ref([
  { id: 1, imgUrl: 'https://img.51miz.com/Element/00/23/81/79/3c43ec93_E238179_886f5896.png', text: "每日推荐" },
  { id: 2, imgUrl: 'https://img.zcool.cn/community/010d565a029a3ba801202b0c534c12.jpg@2o.jpg', text: "抖音热歌" },
  { id: 3, imgUrl: 'https://file.ccmapp.cn/group1/M00/20/73/rApntWEZJpWAJp_rAAz4ssNpW0c286.jpg', text: "民谣" },
  { id: 4, imgUrl: 'https://bpic.588ku.com/element_origin_min_pic/19/12/14/6cb6dd6b71824527795caa0ce552a12b.jpg', text: "巅峰潮流榜" },
])

// 歌单数据
const musicList = ref([
  {id:1,musicImg:'https://ts1.cn.mm.bing.net/th/id/R-C.8809755e93dc3fa5e6dbcc4826f0dd31?rik=l5eWjqI%2fsrpFiQ&riu=http%3a%2f%2fy.gtimg.cn%2fmusic%2fphoto_new%2fT001R300x300M000000CK5xN3yZDJt.jpg%3fmax_age%3d2592000&ehk=q2Kut1TvgdXMomBX9rMeoUwp%2bCFRM0Mq8L3M%2b0gJL%2f0%3d&risl=&pid=ImgRaw&r=0',auth:'许嵩甄选'},
  {id:2,musicImg:'https://ts1.cn.mm.bing.net/th/id/R-C.3ecf7fd030095240c4f5cf9d4093660d?rik=6JYAQ0hANR1M5Q&riu=http%3a%2f%2fwww.guangyuanol.cn%2fuploads%2fallimg%2f180925%2f1222054O2-0.jpg&ehk=sFnl2rdGF4I0cWy5M9QfEXPC1XCQWOtTL5%2bp5BkaWlE%3d&risl=&pid=ImgRaw&r=0',auth:'王俊凯合集'},
  {id:3,musicImg:'https://p0.ssl.img.360kuai.com/t012f0c2f31e6bbc357.jpg',auth:'汪苏泷情歌精选合集'},
  {id:4,musicImg:'https://ts1.cn.mm.bing.net/th/id/R-C.9f8076cdb503310cc7156a8cbe38b5ee?rik=msseQj3Zwetd6Q&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20111%2f263%2fw2048h1415%2f20211228%2f6817-e31f5b8d3f5856aa7c5fde6df2467805.jpg&ehk=RcfaIHzzKwLDc704wtYMMAWi%2bixw1IIUhv%2bk5UyiRCI%3d&risl=&pid=ImgRaw&r=0',auth:'时代少年团'}
])

// 轮播图静态数据
const images = [
  'https://ts1.cn.mm.bing.net/th/id/R-C.a9e10d1b41a4cee6dfd29ef1ba1499f9?rik=uYowR6c9TawDXw&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f40028%2f1588.jpg_wh860.jpg&ehk=nso%2b4f02Tiv2Ett8xpYy2TzdlRqNhkrRQ0AWq7sIDik%3d&risl=&pid=ImgRaw&r=0',
  'https://img.zcool.cn/community/0166995cb6afbea801214168edf585.jpg@1280w_1l_2o_100sh.jpg',
  'https://img.tukuppt.com/ad_preview/00/03/70/5c98aef1c4207.jpg!/fw/780'
];

// 跳转歌单详情页面
const toMusicList = (id)=>{
  console.log('跳转歌单详情',id);
}
</script>
<style scoped>
.my_discovery {
  margin-top: 10px;
  padding: 0 10px;
  height: calc(100vh - 200px);
  overflow-y: scroll;

}

.grid_text {
  font-size: 15px;
}

.music_list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.music_list .text {
  color: #000;
  font-size: 18px;
  font-weight: 600;
}

.music_list span {
  color: #000;
}</style>